<template>
  <div ref="dom" class="charts chart-map"></div>
</template>

<script>
import echarts from 'echarts'
import bMap from 'echarts/dist/extension/bmap.min.js'
import { MP } from './map'
export default {
  name: 'ChartMap',
  props: {
    value: Object,
    text: String,
    subtext: String
  },

  mounted() {
    this.$nextTick(() => {
      MP('UlvsMlHwRWpwGcRsMqc8xworaWWx9ifZ').then(BMap => {
        console.log('bmap', BMap)
        let myData = [{ name: '海门', value: [121.458842, 31.026596, 200] }]
        let option = {
          bmap: {
            center: [121.45794, 31.005893],
            zoom: 15,
            roam: true,
            mapStyle: {
              styleJson: [
                {
                  featureType: 'water',
                  elementType: 'all',
                  stylers: {
                    color: '#002eb1'
                  }
                },
                {
                  featureType: 'land',
                  elementType: 'all',
                  stylers: {
                    color: '#00289b'
                  }
                },
                {
                  featureType: 'boundary',
                  elementType: 'geometry',
                  stylers: {
                    color: '#064f85'
                  }
                },
                {
                  featureType: 'railway',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'geometry',
                  stylers: {
                    color: '#002eb1'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#002eb1',
                    lightness: 1
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'labels',
                  stylers: {
                    color: '#002eb1'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry',
                  stylers: {
                    color: '#002eb1'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#00508b'
                  }
                },
                {
                  featureType: 'poi',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'green',
                  elementType: 'all',
                  stylers: {
                    color: '#056197',
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'subway',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off',
                    color: '#002eb1'
                  }
                },
                {
                  featureType: 'manmade',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'local',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'labels',
                  stylers: {
                    // visibility: 'off'
                  }
                },
                {
                  featureType: 'boundary',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#029fd4'
                  }
                },
                {
                  featureType: 'building',
                  elementType: 'all',
                  stylers: {
                    color: '#1a5787',
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'label',
                  elementType: 'all',
                  stylers: {
                    // visibility: 'off'
                  }
                }
              ]
            },
            enableMapClick: false
          },
          selectedMode: 'single',
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              var res = params.data[3] + '：' + params.data[4]
              return res
            }
          },

          visualMap: {
            // 视觉映射组件
            type: 'continuous',
            min: 0,
            max: 200,
            calculable: true,
            inRange: {
              color: ['#50a3ba', '#eac736', 'red']
            },
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '海风雅居服务店A',
              type: 'scatter',
              symbolSize: 20,
              coordinateSystem: 'bmap', // 坐标系使用bmap
              data: myData,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#ddb926'
                }
              },
              label: {
                // 在文本中，可以对部分文本采用 rich 中定义样式。
                // 这里需要在文本中使用标记符号：
                // `{styleName|text content text content}` 标记样式名。
                // 注意，换行仍是使用 '\n'。
                formatter: [
                  '{a|这段文本采用样式a}',
                  '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
                ].join('\n'),

                rich: {
                  a: {
                    color: 'red',
                    lineHeight: 10
                  },
                  b: {
                    backgroundColor: {
                      image: 'xxx/xxx.jpg'
                    },
                    height: 40
                  },
                  x: {
                    fontSize: 18,
                    fontFamily: 'Microsoft YaHei',
                    borderColor: '#449933',
                    borderRadius: 4
                  }
                }
              }
            }
          ]
        }
        let dom = echarts.init(this.$refs.dom)
        dom.setOption(option)
      })
    })
  }
}
</script>

<style lang="less">
.charts {
  //
}
</style>
